<!DOCTYPE html>
<html lang="en">

<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
	<meta name="description" content="">
	<meta name="author" content="">
	<!-- STYLESHEETS -->
	<!--[if lt IE 9]><script src="../../js/flot/excanvas.min.js"></script><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
	<link rel="stylesheet" type="text/css" href="../../css/cloud-admin.css">
	<link rel="stylesheet" type="text/css" href="../../css/themes/default.css" id="skin-switcher">
	<link rel="stylesheet" type="text/css" href="../../css/responsive.css">
	<link href="../../font-awesome/css/font-awesome.min.css" rel="stylesheet">
	    <!-- SELECT2 -->
    <link rel="stylesheet" type="text/css" href="../../js/select2/select2.min.css" />
	<!-- file-input -->
	<link rel="stylesheet" type="text/css" href="../../js/file-input/fileinput.css" />

	<!-- datatable -->
	<link rel="stylesheet" href="../../js/datatables/datatable.css">

</head>

<body>
<header class="navbar clearfix" id="header">
</header>
<!-- PAGE -->
<section id="page">
	<!-- SIDEBAR -->
	<div id="sidebar" class="sidebar">
		<div class="sidebar-menu nav-collapse">

			<!-- SIDEBAR MENU -->
			<ul>

			</ul>
			<!-- /SIDEBAR MENU -->
		</div>

	</div>
	<!-- /SIDEBAR -->
	<div id="main-content">
		<!-- SAMPLE BOX CONFIGURATION MODAL FORM-->
		<div class="modal fade" id="box-config" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title">维护品牌</h4>
					</div>
					<div class="modal-body">
					<div class="row" >
                                                                <label class="control-label col-md-3">
																	<span class="required">*</span>
																	所属商家：
																</label>
                                                                <div class="col-md-8 inline">
                                                                    <select id="supplier_select" name="supplierName" >

																	</select>
                                                                    <span class="error-span"></span>
                                                                </div>
                                                            </div>
						<div class="row">
							<label class="control-label col-md-3" style="line-height:34px;"><span class="required">*</span>品牌名称：</label>
							<div class="col-md-8">
								<input type="text" class="form-control" name="brandName" placeholder="请输入品牌名称" maxlength="20" />
								<input type="hidden" name="id" />
							</div>
						</div>
						<div class="row" style="height: 100px">
							<label class="control-label col-md-3" style="line-height:34px;"><span class="required">*</span>品牌LOGO：</label>
							<form>
								<div class="col-md-8">
									<div hidden-image></div>
									<div class="fileinput fileinput-new" data-provides="fileinput" >
										<div class="image_preview_list" style="float:left;" id="imgs">
											<div class="fileinput-preview thumbnail image_preview_default" data-trigger="fileinput" style="width: 120px; height: 90px;"></div>
										</div>
										<div style="float:left; margin-left:5px; padding-top:23px;" class="addnewimg" id="f_span">
													<span class="btn btn-default btn-file" id="fir">
														<span class="fileinput-new" id="two" >上传图片</span>
														<span class="fileinput-exists">Change</span>
															<input type="file" name="uploadFile" upload-file="imageUrlProduct">
													</span>
											<a href="#" class="btn btn-default fileinput-exists"  data-dismiss="fileinput">Remove</a>

										</div>
									</div>
								</div>
							</form>
						</div>
						<div class="row" style="height: 100px">
							<label class="control-label col-md-3" style="line-height:34px;"><span class="required">*</span>品牌Banner：</label>
							<form>
								<div class="col-md-8">
									<div hidden-image></div>
									<div class="fileinput fileinput-new" data-provides="fileinput" >
										<div class="image_preview_list" style="float:left;" id="imgs">
											<div class="fileinput-preview thumbnail image_preview_default" data-trigger="fileinput" style="width: 120px; height: 90px;"></div>
										</div>
										<div style="float:left; margin-left:5px; padding-top:23px;" class="addnewimg" id="f_span">
													<span class="btn btn-default btn-file" id="fir">
														<span class="fileinput-new" id="two" >上传图片</span>
														<span class="fileinput-exists">Change</span>
															<input type="file" name="uploadFile" upload-file="imageUrlProduct">
													</span>
											<a href="#" class="btn btn-default fileinput-exists"  data-dismiss="fileinput">Remove</a>

										</div>
									</div>
								</div>
							</form>
						</div>
						<div class="row">
							<label class="control-label col-md-3" style="line-height:34px;"><span class="required">*</span>所属国家：</label>
							<div class="col-md-8">
								<input type="text" class="form-control" name="country" placeholder="请输入所属国家" maxlength="20"  value="中国"/>
							</div>
						</div>
						<div class="row">
							<label class="control-label col-md-3" style="line-height:34px;"><span class="required">*</span>品牌介绍：</label>
							<div class="col-md-8">
								<textarea class="form-control" name="brandDesc" placeholder="请输入品牌介绍" maxlength="50" rows="3" cols="10"  style="height:80px;resize:none"></textarea>


							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-success bt-save">保存</button>
					</div>
				</div>
			</div>
		</div>
		<!-- /SAMPLE BOX CONFIGURATION MODAL FORM-->
		<div class="container">
			<div class="row">
				<div id="content" class="col-lg-12">
					<!-- PAGE HEADER-->
					<div class="row" style="height: 30px;">
						<div class="col-sm-12">
							<div class="page-header">
								<!-- STYLER -->

								<!-- /STYLER -->
								<!-- BREADCRUMBS -->
								<ul class="breadcrumb">
									<li>
										<i class="fa fa-home"></i>
										<a href="../index.html">首页</a>
									</li>
									<li>
										<a href="#">商品管理</a>
									</li>
									<li>商品品牌</li>
								</ul>
								<!-- /BREADCRUMBS -->

							</div>
						</div>
					</div>
					<!-- /PAGE HEADER -->
					<!-- FORMS QUERY-->
					<div class="row">
						<div class="col-md-12">
							<div class="row">
								<div class="col-md-12">
									<div class="box border primary">
										<div class="box-title">
											<h4><i class="fa fa-bars"></i>查询条件</h4>
										</div>
										<div class="box-body big" style="padding:10px;">
											<form class="form-horizontal" role="form">
												<div class="form-group mrg-bt10">
													<label class="col-sm-1 control-label" style="width: auto">品牌名称：</label>
													<div class="col-sm-2">
														<input type="text" class="form-control" name="q" placeholder="输入关键字">
													</div>
													<div class="col-sm-1">
														<a class="btn btn-primary search">查询</a>
													</div>
												</div>
											</form>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- /FORMS QUERY -->
					<div class="row" style="height: 30px;">
						<div class="col-md-12">
							<div class="box ">
								<a id="create" data-toggle="modal" class="btn btn-success config">
									<i class="fa  fa-plus-square-o"></i> 新增品牌
								</a>

							</div>
						</div>
					</div>

					<div class="row">
						<!-- TABLES -->
						<div class="col-md-12">
							<!-- BOX -->
							<div class="box border primary">
								<div class="box-title">
									<h4><i class="fa fa-table"></i>品牌数：<span id="total"></span>条 </h4>

								</div>
								<div class="box-body">
									<table id="db_brand_list" cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered table-hover">

									</table>
								</div>
							</div>
							<!-- /BOX -->
						</div>
					</div>
					<!-- /TABLES -->

					<div class="footer-tools">
								<span class="go-top">
								<i class="fa fa-chevron-up"></i> Top
							</span>
					</div>
				</div>
				<!-- /CONTENT-->
			</div>
		</div>
	</div>
	<input type="hidden" name="brandId" />
</section>

<!--/PAGE -->
<!-- JAVASCRIPTS -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- JQUERY -->
<script src="../../js/jquery/jquery-2.0.3.min.js"></script>
<!-- JQUERY UI-->
<script src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
<!-- BOOTSTRAP -->
<script src="../../bootstrap-dist/js/bootstrap.min.js"></script>

<!-- BLOCK UI -->
<script type="text/javascript" src="../../js/jQuery-BlockUI/jquery.blockUI.min.js"></script>

<!-- AUTOSIZE -->
<script type="text/javascript" src="../../js/autosize/jquery.autosize.min.js"></script>

<!-- INPUT MASK -->
<script type="text/javascript" src="../../js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>
<!-- SELECT2 -->
<script type="text/javascript" src="../../js/select2/select2.min.js"></script>

<!-- bootstrap-fileupload -->
<script type="text/javascript" src="../../js/jquery-upload/js/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="../../js/jquery-upload/js/jquery.fileupload.min.js"></script>
<script type="text/javascript" src="../../js/jquery-upload/js/jquery.fileupload-process.min.js"></script>
<script type="text/javascript" src="../../js/jquery-upload/js/jquery.fileupload-validate.min.js"></script>

<!-- UNIFORM -->
<script type="text/javascript" src="../../js/uniform/jquery.uniform.min.js"></script>
<!-- spinner -->
<script src="../../js/spinner/spin.js"></script>
<!-- DATA TABLES -->
<script type="text/javascript" src="../../js/datatables/bootstrap-select.js"></script>
<script type="text/javascript" src="../../js/datatables/datatable.js"></script>
<script type="text/javascript" src="../../js/datatables/datatable-bootstrap.js"></script>
<script type="text/javascript" src="../../js/datatables/datatable-tabletools.js"></script>
<script type="text/javascript" src="../../js/datatables/fnAddTr.js"></script>

<!--bootbox-->
<script type="text/javascript" src="../../js/bootbox/bootbox.min.js"></script>
<!-- COOKIE -->
<script type="text/javascript" src="../../js/jQuery-Cookie/jquery.cookie.min.js"></script>
<!-- CUSTOM SCRIPT -->
<script src="../../js/script.js"></script>
<script src="../../js/common.js"></script>
<script>

    var Brand=function(){
        //保存编辑
        var saveBrand=function(){

            $(".form-group").removeClass("has-error");
            var brandName=$("input[name=brandName]").val();
            var logo=$("input[name=logo]").val();
            var country=$("input[name=country]").val();
            var brandDesc=$("[name=brandDesc]").val();
            var supplierId=$("#supplier_select").val();
            
			if(supplierId==""){
               $("select[name=brandName]").parents(".row").addClass("has-error");
                return false;
            }
            if (brandName=="") {
                $("input[name=brandName]").parents(".row").addClass("has-error");
                return false;
            }
            if($(".image_preview_default:eq(0)").find("img").length==0){
                $("input[name=logo]").parents(".row").addClass("has-error");
                return false;
            }
            if($(".image_preview_default:eq(1)").find("img").length==0){
                $("input[name=bannerImagePath]").parents(".row").addClass("has-error");
                return false;
            }
            if(country==""){
                $("input[name=country]").parents(".row").addClass("has-error");
                return false;
            }
            if(brandDesc==""){
                $("textarea[name=brandDesc]").parents(".row").addClass("has-error");
                return false;
            }

            var brand = {};
            brand.id = $("input[name=id]").val();
            brand.brandName =brandName;
            brand.logoImagePath=$(".image_preview_default:eq(0)").find("img").attr("src");
            brand.bannerImagePath=$(".image_preview_default:eq(1)").find("img").attr("src");
            brand.brandDesc=brandDesc;
            brand.supplierId=supplierId;
            brand.country=country;
            $.ajax({
                type: "post",
                url: App.getContextPath()+"admin/brand/saveBrand.do",
                async: true,
                data: {brand:JSON.stringify(brand)},
                success: function(result) {
                    $("#box-config").modal("hide");
                    $.clearInput();
                    searchBrand();
                }
            });


        };

        var deleteBrand=function(){
            var tr = $(this).closest("tr");
            if ($(tr).find(".productNum").html() != "0") {
                $.alert("品牌下已经绑定商品，请先解除关系后，再删除！");
                return;
            } else {
                $.confirm("确认删除此品牌?",function(){
                    $.ajax({
                        type: "post",
                        url: App.getContextPath()+"admin/brand/updateBrandStatus.do",
                        async: true,
                        data: {
                            id: $(tr).find("td:eq(0)").html()
                        },
                        success: function(result) {
                            searchBrand();
                        }
                    });
                });
            }
        };

        var searchBrand=function(){
            var url=App.getContextPath()+"admin/brand/searchBrand.do?q="+$("input[name=q]").val();
            var dtSetting = $.dataTableSetting({
                "ajaxSource" :url,
                "serverSide" : true,
                "bFilter" : false,// 去掉搜索框
                "bLengthChange" : true,// 每页显示数量

                "sScrollX":"100%",
                "sScrollXInner": "100%",
                "iDisplayLength": 10,

                "bSort" : false,
                "aoColumns" : [ {
                    "mDataProp" : "id",
                    "sTitle" : "品牌ID",
                    "width" : "10%"
                }, {
                    "mDataProp" : "brandName",
                    "sTitle" : "品牌名称",
                    "width" : "10%"
                }, {
                    "sTitle" : "品牌LOGO",
                    "render":function(data, type, row){
                        return "<img width='30px' height='30px' src="+(row.logoImagePath)+">";
                    },
                    "width" : "10%"
                }
                    , {
                        "mDataProp" : "country",
                        "sTitle" : "所属国家 ",
                        "width" : "8%"

                    }, {
                        "mDataProp" : "productNum",
                        "sTitle" : "商品数 ",
                        "class":"productNum",
                        "width" : "8%"


                    }
                    , {
                        "mDataProp" : "brandDesc",
                        "sTitle" : "品牌介绍",
                        "class":"brandDesc",
                        "width" : "20%"

                    }, {
                        "mDataProp" : "createTime",
                        "sTitle" : "创建时间",
                        "render":function(data, type, row){
                            return $.getLocalTime(row.createTime);
                        },
                        "width" : "15%"
                    }, {
                        "sTitle" : "操作",

                        "render":function(data, type, row) {
                            var str="<p class='btn-toolbar' style='margin:0px'>"+
                                "<button class='btn btn-success btn-xs bt_edit btn-width'><i class='fa fa-pencil-square-o'></i>编辑</button>"+
                                "<button class='btn btn-danger btn-xs bt_del btn-width'><i class='fa fa-trash-o'></i> 删除</button></p>";
                            return str;
                        }
                    }, {

                        "render":function(data, type, row){
                            return "<img width='30px' height='30px' src="+(row.bannerImagePath)+">";
                        },
                        "class":"bannerImagePath hidden",
                        "width" : "0"
                    }, {
                        "mDataProp" : "supplierId",
                        "class":"supplierId hidden",
                        "width" : "0"
                    }]
            });

            $mainDataTable = $("#db_brand_list").dataTable(dtSetting);
        };
        var showDialog=function(){
            fileUpLoad();
            $.clearInput();
            $("#box-config").modal("show");
            $("#box-config").find("input[name=country]").val("中国");
            loadSupplier();
        };

        var fileUpLoad=function(){
            $("[upload-file=imageUrlProduct]").fileupload({
                url: App.getContextPath()+"admin/file/uploadImage.do",
                formData: {fileType: "ProductDetailImage"},
                dataType: 'json',
                acceptFileTypes: /(\.|\/)(gif|jpe?g|png|JPG?g)$/i,
                iframe: true,
                autoUpload: true,
                done: function(e, data) {

                    var result=	data.result;
                    if(result.message!=""){
                        $.alert(result.message);
                        return false;
                    }else{
                        var $tr = $(this).closest("form");
                        $tr.find("[hidden-image]").append("<input type='hidden'  value='" + result.fileUrl+"' />");
                        $tr.find(".image_preview_default").html("<img src='"+result.fileUrl+"' />");
                    }
                }
            });

        };
        //加载商家
        var loadSupplier = function() {
            	
                $.ajax({
                    type: "get",
                    url: App.getContextPath() +
                        "admin/store/searchSupplierList.do",
                    async: true,
                    success: function(result) {
                        if (result != null) {
                            var data = eval(result);
                           var option = "<option></option>";
                           
                            $.each(data, function(index, item) {
                                option += "<option value='" + item.id + "'>" +
                                    item.supplierName + "</option>";
                                     
                            });
                           
                             $("#box-config").find("#supplier_select").empty().append(option).select2({
                                placeholder: "选择商家"
                            });
                            $("#s2id_supplier_select").css("width",360)
                            
                           
                            
                        }
                    }
                });
            };

        return {

            init:function(){
                searchBrand();
                $(".search").click(searchBrand);
                $(".bt-save").click(saveBrand);
                $("#db_brand_list").on("click",".bt_edit",function() {
                    showDialog();
                    
                    var tr = $(this).closest("tr");
                    $("#box-config").find("input[name=id]").val($(tr).find("td:eq(0)").html());
                    $("#box-config").find("input[name=brandName]").val($(tr).find("td:eq(1)").html());
                    $("#box-config").find("input[name=country]").val($(tr).find("td:eq(3)").html());
                    $("#box-config").find("[name=brandDesc]").val($(tr).find(".brandDesc").html());
                    $("#box-config").find("[name=supplierName]").select2("val",$(tr).find(".supplierId").html())
                    $(".image_preview_default:eq(0)").html("<img src='"+$(tr).find("td:eq(2)").find("img").attr("src")+"'>");
                    $("[hidden-image]:eq(0)").append("<input type='hidden' value='"+$(tr).find("td:eq(2)").find("img").attr("src")+"' name='logo'>");

                    $(".image_preview_default:eq(1)").html("<img src='"+$(tr).find(".bannerImagePath").find("img").attr("src")+"'>");
                    $("[hidden-image]:eq(1)").append("<input type='hidden' value='"+$(tr).find(".bannerImagePath").find("img").attr("src")+"' >");

                    $("#box-config").modal("show");
                });

                $("#db_brand_list").on("click",".bt_del",deleteBrand);

                $("#create").click(showDialog);

            }
        }
    }();

    $(function(){
        $("#header").load("../head.html");
        App.init(); //Initialise plugins and elements
        Brand.init();

    });
</script>
<!-- /JAVASCRIPTS -->
</body>

</html>